<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '评价',
  },
}
</route>

<script setup>
import ContentBox from '@/components/ContentBox.vue'
import { EVALUATION_LIST } from '@/configs/evaluation'
import OrderApi from '@/service/order'

const optionsId = ref('')
onLoad((options) => {
  const { id } = options
  if (id) {
    optionsId.value = id
  }
})

const activeValue = ref('')

const checkItem = (item) => {
  activeValue.value = item.value
}

const handleConfirm = async () => {
  if (!activeValue.value) {
    uni.showToast({
      title: '请选择评价',
      icon: 'none',
    })
    return
  }
  const params = {
    orderId: optionsId.value,
    rating: Number(activeValue.value),
  }
  const { code, message } = await OrderApi.addShareOrderEvaluation(params)
  if (code === 200) {
    uni.showToast({
      title: '评价成功',
      icon: 'success',
    })
    // 通知上一页列表刷新
    uni.$emit('updateShareEvaluationList')
    setTimeout(() => {
      uni.navigateBack()
    }, 1000)
  } else {
    uni.showToast({
      title: message,
      icon: 'none',
    })
  }
}
</script>

<template>
  <view class="common-page-bg">
    <view class="p-24rpx">
      <ContentBox>
        <view class="title">您对本次活动满意吗？</view>
        <view class="evaluation-list">
          <view
            v-for="item in EVALUATION_LIST"
            :key="item.value"
            class="evaluation-list-item"
            :class="{ active: item.value === activeValue }"
            @click="checkItem(item)"
          >
            <image
              class="size-80rpx mb-24rpx"
              :src="item.iconSrc"
            ></image>
            <view class="evaluation-text">{{ item.label }}</view>
          </view>
        </view>
      </ContentBox>
      <view class="mt-80rpx">
        <wd-button
          custom-class="common-main-btn"
          @click="handleConfirm"
        >
          提交
        </wd-button>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.title {
  margin-bottom: 32rpx;
  font-size: 32rpx;
  font-weight: 500;
  color: $uni-text-color;
}

.evaluation-list {
  display: flex;
  align-items: center;
  justify-content: space-between;

  &-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 16rpx 0;
    background-color: #fff;
    border-radius: 8rpx;
    font-size: 24rpx;
    color: $uni-text-color;

    &.active {
      background-color: #f4f7fc;
    }
  }
}
</style>
